import '../css/common.css';
import '../css/explore.css';
import '../js/axios.js';
import axios from '../js/axios.js';

// 每次拿10个
let pageSize = 10;
// 加载的页数,每次触底更新该数据
let pageNum = 0;
// 记录点击的是哪一个按钮(初始是全部)
let pageType = 0;
// total总共会有多少页
let total = 0;
let flag = true;
let tabClick = 0;

// 事件委托li
let tabUl = document.querySelector('.sec-nav>ul');
let main = document.querySelector('main');
let str = '全部';
// 一开始拿到全部的数据并渲染
exploreAllData('全部');

// 瀑布流函数
function waterfallFn() {
    // 设定每个元素的间隙
    let space = 20;
    let boxList = document.querySelectorAll('.box');
    let main = document.querySelector('main');
    let maxH;
    // 每个元素的宽度
    const boxWidth = boxList[0].offsetWidth + space;
    // 获取当前页面的列数 (一行能够容纳多少个元素)
    const colCount = Math.floor(main.offsetWidth / boxWidth);
    // 创建一个数组, 数组成员列数成员的高度
    let heightArr = new Array(colCount).fill(0); // [0,0,0]
    // 遍历所有的元素, 比较他们的高度, 设置最小高度
    boxList.forEach((el) => {
        const h = el.offsetHeight;
        // const minH = Math.min(...heightArr)
        let tempArr = JSON.parse(JSON.stringify(heightArr));
        const minH = tempArr.sort(function (a, b) {
            return a - b;
        })[0];
        // 获取最小值的下标
        const minIndex = heightArr.indexOf(minH);
        // 一次性写入样式
        el.style.cssText = `
      position: absolute;
      top: ${minH}px;
      left: ${boxWidth * minIndex}px;
      `;
        // 修改最小高度的值 (累加)
        heightArr[minIndex] += h + space;
        tempArr = JSON.parse(JSON.stringify(heightArr));
        maxH = tempArr.sort(function (a, b) {
            return a - b;
        })[tempArr.length - 1];
    });
    main.style.height = `${maxH}px`;
}

// 获取探索的数据,传入一个字符串，根据字符串去找对应分类的数据
async function exploreAllData(str) {
    try {
        // eslint-disable-next-line no-unused-vars
        let res = await new Promise((resolve, reject) => {
            resolve(
                axios({
                    url: 'http://119.91.237.19:7001/api/web/carouselGroup/getAllCarouselGroup',
                    method: 'get',
                    params: {
                        projectId: 26,
                        limit: 100,
                    },
                })
            );
        });
        // 将探索的内容拿出来
        let newArr = res.data.data.rows.filter((item) => {
            return item.name.slice(0, 2) === '探索';
        });
        // console.log(newArr);
        // 渲染标签栏
        if (!tabClick) {
            let secNavUl = document.querySelector('.sec-nav>ul');
            let navStr =
                ' <li class="active" data-pageNum="0" data-name="全部">全部</li>';
            newArr.forEach(function (item, index) {
                // console.log(item.name.slice(3, item.name.length));
                navStr += `<li data-pagenum="${
                    index + 1
                }" data-name="${item.name.slice(
                    3,
                    item.name.length
                )}">${item.name.slice(3, item.name.length)}</li>`;
            });
            secNavUl.innerHTML = navStr;
        }

        // 如果点击的是分类的内容，需要将对应的内容筛选出来
        if (str != '全部') {
            newArr = newArr.filter((item) => {
                return item.name.slice(3, item.name.length) === str;
            });
        }

        // 将数据根据id的从大到小排序
        newArr = dataSort(newArr);
        total = Math.ceil(newArr.length / pageSize);
        newArr = sliceArr(newArr);
        render(newArr);
    } catch (error) {
        console.log(error);
    }
}

function sliceArr(arr) {
    return arr.slice(pageNum * pageSize, pageSize * (pageNum + 1));
}

// 根据id的大小去排列数据，新加入的图片id大，放在前面
function dataSort(arr) {
    let newArr = [];
    arr.forEach((item) => {
        item.w_carousels.forEach((item) => {
            newArr.push(item);
        });
    });
    // 根据id的大小排序，新加入的图片id大，则将其放在数组的前面
    return newArr.sort((a, b) => {
        return b.id - a.id;
    });
}

function render(arr) {
    let main = document.querySelector('main');
    let indexImg = 0;
    for (let i = 0; i < arr.length; i++) {
        let childBox = document.createElement('div');
        childBox.classList.add('box');
        let childImg = document.createElement('img');
        childImg.src = arr[i].url;
        childImg.alt = '图片加载失败';
        childImg.onload = function () {
            indexImg++;
            if (indexImg === arr.length) {
                waterfallFn();
                pageNum++;
                flag = true;
            }
        };
        childBox.appendChild(childImg);
        main.appendChild(childBox);
    }
}

// 事件委托点击
tabUl.addEventListener('click', (e) => {
    let lis = tabUl.querySelectorAll('li');
    if (e.target.tagName === 'LI') {
        tabClick++;
        pageNum = 0;
        let main = document.querySelector('main');
        main.innerHTML = '';
        lis[pageType].classList.remove('active');
        lis[Number(e.target.dataset.pagenum)].classList.add('active');
        pageType = Number(e.target.dataset.pagenum);
        str = e.target.dataset.name;
        exploreAllData(e.target.dataset.name);
        window.scrollTo({
            top: 0,
        });
    }
});

// 触底加载
window.addEventListener('scroll', () => {
    if (pageNum >= total) return;
    let docScrollTop = document.documentElement.scrollTop;
    let docHeight = document.documentElement.clientHeight;
    // 判断是否到底部
    if (docScrollTop + docHeight >= main.offsetTop + main.offsetHeight) {
        if (flag === false) return;
        flag = false;
        setTimeout(() => {
            exploreAllData(str);
        }, 500);
        // console.log("到底了");
    }
});
